<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=no" name="format-detection">
    <title>黎世阁首页</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/index.css"/>

    <link rel="stylesheet" href="css/swiper.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script type="text/javascript">


        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;

                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })(document, window);

    </script>
</head>
<body>
<div class="wrapper">
    <header>
        <i class="iconfont menu">&#xe60d;</i>
        <img class="logo" src="img/logo.png" alt="" />
        <i class="iconfont search">&#xe6ac;</i>
    </header>
    <div class="swiper-container1">
        <div class="swiper-wrapper">
            <div class="swiper-slide border">首&nbsp;&nbsp;&nbsp;页</div>
            <div class="swiper-slide">美式乡村</div>
            <div class="swiper-slide">古典欧式</div>
            <div class="swiper-slide">地中海式</div>
            <div class="swiper-slide">东南亚</div>
            <div class="swiper-slide">日本</div>
            <div class="swiper-slide">东南亚</div>
            <div class="swiper-slide">东南亚</div>
            <div class="swiper-slide">日本</div>
            <div class="swiper-slide">东南亚</div>
            <div class="swiper-slide">东南亚</div>
            <div class="swiper-slide">日本</div>
            <div class="swiper-slide">东南亚</div>
        </div>
        <!-- Add Pagination -->
    </div>

    <section class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/banner.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="img/banner_1.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="img/banner.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="img/banner_1.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="img/banner.jpg" alt=""/></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>
    <nav>
        <ul class="clearfix">
            <li>
                <div>
                    <i class="iconfont">&#xe705;</i>
                </div>
                <span>关于我们</span>
            </li>
            <li>
                <div>
                    <i class="iconfont">&#xe722;</i>
                </div>
                <span>Qu商场</span>
            </li>
            <li>
                <div>
                    <i class="iconfont">&#xe6b5;</i>
                </div>
                <span>Chou分类</span>
            </li>
            <li>
                <div>
                    <i class="iconfont">&#xe6b3;</i>
                </div>
                <span>Kan知识</span>
            </li>
            <li>
                <div>
                    <i class="iconfont">&#xe6b2;</i>
                </div>
                <span>Du论坛</span>
            </li>
        </ul>

    </nav>
    <section class="nous">
        <span class="jjcs">家具常识</span>
        <div class="hot-talk">热议</div>
        <span class="shimu">实木家具保养小常识,你知道多少?</span>
    </section>
    <section class="goods_more clearfix">
        <div class="goods_more_1">
            <div class="num">2017</div>
            <span class="goods_name">北欧实木餐桌现代书房桌办公桌设计师实木桌</span>
            <div class="more">MORE <span style="font-family: 宋体;font-weight: 600;">></span></div>
            <img class="goods_name_tu" src="img/goods_name.jpg" alt=""/>
        </div>
        <div class="goods_more_2">
            <img class="goods_name_tu1" src="img/goods_name_1.jpg" alt=""/>
            <span class="let">LEE’S NEW FEATURES</span>
            <span class="beio">北欧简约个性木质吧台吊灯</span>
            <div class="more">MORE <span style="font-family: 宋体;font-weight: 600;">></span></div>
        </div>
    </section>
    <scetion>
        <div>
            <div class="today_new">
                <span class="today_new_title">TODAY ON THE NEW</span>
                <span class="today_new_zi">今日上新</span>
            </div>
            <div class="swiper-container2">
                <div class="swiper-wrapper">
                    <ul class="swiper-slide clearfix">
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_1.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_2.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div>
            <div class="list_title"><img src="img/goods_title.jpg" alt=""/></div>
            <div class="today_new">
                <span class="today_new_title">HOT STYLE</span>
                <span class="today_new_zi">爆款</span>
            </div>
            <div class="swiper-container2">
                <div class="swiper-wrapper">
                    <ul class="swiper-slide clearfix">
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_3.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_4.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div>
            <div class="list_title"><img src="img/goods_title_1.jpg" alt=""/></div>
            <div class="today_new">
                <span class="today_new_title">RECOMMENDED</span>
                <span class="today_new_zi">推荐</span>
            </div>
            <div class="swiper-container2">
                <div class="swiper-wrapper">
                    <ul class="swiper-slide clearfix">
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_5.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_6.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div>
            <div class="list_title"><img src="img/goods_title_2.jpg" alt=""/></div>
            <div class="today_new">
                <span class="today_new_title">SELL LIKE HOT CAKES</span>
                <span class="today_new_zi">热销</span>
            </div>
            <div class="swiper-container2">
                <div class="swiper-wrapper">
                    <ul class="swiper-slide clearfix">
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_7.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_8.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="padding-bottom:1.3rem;">
            <div class="list_title"><img src="img/goods_title_3.jpg" alt=""/></div>
            <div class="today_new">
                <span class="today_new_title">ACTIVITIES OF GOODS</span>
                <span class="today_new_zi">活动</span>
            </div>
            <div class="swiper-container2">
                <div class="swiper-wrapper">
                    <ul class="swiper-slide clearfix">
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_9.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                        <li>
                            <div class="goods_tu">
                                <img src="img/goods_10.jpg" alt=""/>
                            </div>
                            <div class="goods_zi">
                                <span>北欧现代伸缩落地灯</span>
                                <span class="price">￥368</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </scetion>
    <footer>
        <ul class="clearfix">
            <li>
                <div class="iconfont_box">
                    <i class="iconfont">&#xe600;</i>
                </div>
                <div class="iconfont_box_1">
                    <i class="iconfont">&#xe612;</i>
                </div>
                <span>首页</span>
            </li>

            <li>
                <div class="iconfont_box">
                    <i class="iconfont">&#xe6b3;</i>
                </div>
                <div class="iconfont_box_1">
                    <i class="iconfont">&#xe616;</i>
                </div>
                <span>知识</span>
            </li>
            <li>
                <div class="iconfont_box">
                    <i class="iconfont">&#xe6b2;</i>
                </div>
                <div class="iconfont_box_1">
                    <i class="iconfont">&#xe614;</i>
                </div>
                <span>论坛</span>
            </li>
            <li>
                <div class="iconfont_box">
                    <i class="iconfont">&#xe698;</i>
                </div>
                <div class="iconfont_box_1">
                    <i class="iconfont">&#xe611;</i>
                </div>
                <span>购物车</span>
            </li>
            <li>
                <div class="iconfont_box">
                    <i class="iconfont">&#xe6b8;</i>
                </div>
                <div class="iconfont_box_1">
                    <i class="iconfont">&#xe615;</i>
                </div>
                <span>我的</span>
            </li>
        </ul>
    </footer>
</div>
<!--遮罩开始-->
<div class="msk_box">
    <i class="iconfont close">&#xe723;</i>
    <div class="nav_title">
        HOME
    </div>
    <ul class="nav_list">
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">空间 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">分类 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">论坛 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">

                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">关于我们 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">公司简介</li>
                <li class="nav_two_item">发展历程</li>
                <li class="nav_two_item">新闻中心</li>


            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">特价活动 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">如何购买 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">联系我们 </p></div>


        </li>

    </ul>
    <p class="lianxi">SERVICE我的家@wodejia.com<br>
        400-8888-666</p>
</div>
<div class="msk">

</div>
<!--遮罩结束-->

</body>

<script>
    var swiper = new Swiper('.swiper-container1', {

        slidesPerView: 5,
        paginationClickable: true,
        spaceBetween: 0

    });


    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
     
        autoplay: 3000
    });

    var swiper = new Swiper('.swiper-container2', {

        paginationClickable: true
    });
    $(".menu").click(function () {
$('.msk_box').css('-webkit-transform','translate(100%,0)');
setTimeout("$('.msk').fadeIn()",300)
    })
    $(".close").click(function () {
        $('.msk_box').css('-webkit-transform','translate(0,0)');
        setTimeout("$('.msk').fadeOut()",100)
    })



    $("footer ul li").click(function () {
        $(".iconfont_box_1").hide();
        $(".iconfont_box").show();
        $(this).find('.iconfont_box_1').show();
        $(this).find(".iconfont_box").hide();
    });

    $(".swiper-slide").click(function () {
        $(this).addClass("swiper-slide-active").siblings().removeClass("swiper-slide-active");
    });

    $(".nav_item").click(function () {

        if (!($(this).hasClass('active'))) {
            $(this).addClass("active").siblings().removeClass("active");
            $(".zhan").css('-webkit-transform', 'rotate(0deg)');
            $(this).find(".zhan").css('-webkit-transform', 'rotate(45deg)');
            $(".nav_two_list").slideUp();
            $(this).find(".nav_two_list").slideDown();
            $(".nav_three_list").slideUp();
        }
        else {
            $(".nav_item").removeClass("active");
            $(".zhan").css('-webkit-transform', 'rotate(0deg)');
            $(".nav_two_list").slideUp();
            $(".nav_three_list").slideUp();
        }



    });
    function stopBubble(e)
    {
        if (e && e.stopPropagation)
            e.stopPropagation();
        else
            window.event.cancelBubble=true
    }
    $(".nav_two_item").click(function (e) {

        if (!($(this).hasClass('active'))) {
            $(this).addClass("active").siblings().removeClass("active");
            $(".nav_three_list").slideUp();
            $(this).find(".nav_three_list").slideDown();


        }
        else {
            $(this).removeClass("active")
        }
        stopBubble(e)


    });
        $(".nav_three_item").click(function () {

            $('.nav_three_item').css('background', '#fff');
            $('.nav_three_item').css('color', '#999999');
            $(this).css('background', '#636363');
            $(this).css('color', '#ffffff');

        });






</script>
</html>